import 'dart:async';

import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:tv_friso_screen/utils/result_check_utils.dart';
import 'package:tv_friso_screen/widget/map.dart';
import 'package:tv_friso_screen/widget/marquee_widget.dart';
import 'package:tv_friso_screen/widget/option_gridview.dart';

import '../data_model/home_info.dart';
import '../data_model/k_value.dart';
import '../model/response_with_object.dart';
import '../net/api_address.dart';
import '../net/data_helper.dart';
import '../net/http_manager.dart';

class HomePageEnPad extends StatefulWidget {
  const HomePageEnPad({super.key});

  @override
  State<HomePageEnPad> createState() => _HomePageEnPadState();
}

class _HomePageEnPadState extends State<HomePageEnPad>
    with AutomaticKeepAliveClientMixin {
  @override
  bool get wantKeepAlive => true;

  var scrollController = ScrollController();

  // 组件ListView的实例对象
  ScrollController autoScontroller = ScrollController();
  Timer? timer;
  Timer? timerPeriodic;
  Timer? mTimer; //页面定时刷新计时器
  Timer? downTimer; //右上角时分秒显示倒计时
  // 设置滚动的距离
  double offset = 0;

  HomeInfo? mHomeData;

  //全部数据 7个
  List<KValue> allItems = [];
  List<String> zoneIndex = [
    "East District",
    "West District",
    "South District",
    "North District"
  ];

  List<String> topIcons = [
    "assets/images/icon_one.png",
    "assets/images/icon_two.png",
    "assets/images/icon_three.png",
    "assets/images/icon_four.png",
    "assets/images/icon_five.png",
  ];

  var selectPIndex = -1; //点击选中的省份城市 集合下标

  late double scale;

  //全区销售数据统计（第二版单页面app接口）
  void getHomeData() async {
    var params = {};
    var formData = DataHelper.getBaseMapParams(params);
    var response =
        await HttpManager().get(ApiAddress.getMainData, query: formData);

    if (response['data'] != null &&
        response['code'] == HttpManager.codeSuccess) {
      ResponseWithObject<HomeInfo> data =
          ResponseWithObject.fromJson(response as Map<String, dynamic>, (j) {
        if (j != null) {
          return HomeInfo.fromJson(j);
        } else {
          return j;
        }
      });
      if (data.code == HttpManager.codeSuccess && mounted) {
        //给首页赋值
        setState(() {
          mHomeData = data.data;

          allItems.clear();

          //首页头部今日数据
          if (null != mHomeData!.totalData) {
            //原来的数据
            // allItems.add(KValue(
            //     "今日皇家美素(箱)", "", mHomeData!.totalData.todayPrestigeGoods));
            // allItems.add(KValue(
            //     "今日源悦(箱)", "", mHomeData!.totalData.todayDLGoods.toString()));
            // allItems.add(
            //     KValue("今日旺玥(箱)", "", mHomeData!.totalData.todayImmuGoods));
            // allItems
            //     .add(KValue("本月活跃lsp数", "", mHomeData!.totalData.lspNumber));
            // allItems
            //     .add(KValue("本月活跃门店数", "", mHomeData!.totalData.shopNumber));
            //
            // allItems.add(
            //     KValue("皇家美素本月销售量(箱)", "", mHomeData!.totalData.prestigeGoods));
            // allItems
            //     .add(KValue("源悦本月销售量(箱)", "", mHomeData!.totalData.dLGoods));
            // allItems
            //     .add(KValue("旺玥本月销售量(箱)", "", mHomeData!.totalData.immuGoods));
            // // allItems
            // //     .add(KValue("米粉本月销售量(箱)", "", mHomeData!.totalData.goldGoods));
            // allItems.add(KValue(
            //     "本月订单金额(千元)", "", mHomeData!.totalData.monthOrderAmount));

            // 修改后的数据
            allItems.add(KValue("Daily Prestige(Ctn)", "",
                mHomeData!.totalData.todayPrestigeGoods));
            allItems.add(KValue("Daily Prestige Supreme(Ctn)", "",
                mHomeData!.totalData.todaySupremeGoods.toString()));
            allItems.add(KValue("Daily Natura(Ctn)", "",
                mHomeData!.totalData.todayDLGoods.toString()));
            // allItems.add(
            //     KValue("今日旺玥(箱)", "", mHomeData!.totalData.todayImmuGoods));
            allItems.add(
                KValue("Active LSP(MTD)", "", mHomeData!.totalData.lspNumber));

            allItems.add(KValue(
                "MTD Prestige(Ctn)", "", mHomeData!.totalData.prestigeGoods));
            allItems.add(KValue("MTD Prestige Supreme(Ctn)", "",
                mHomeData!.totalData.supremeGoods));
            allItems.add(
                KValue("MTD Natura(Ctn)", "", mHomeData!.totalData.dLGoods));
            // allItems
            //     .add(KValue("旺玥本月销售量(箱)", "", mHomeData!.totalData.immuGoods));
            // allItems
            //     .add(KValue("米粉本月销售量(箱)", "", mHomeData!.totalData.goldGoods));
            // allItems.add(KValue(
            //     "本月订单金额(千元)", "", mHomeData!.totalData.monthOrderAmount));
            allItems.add(KValue(
                "Active Store(MTD)", "", mHomeData!.totalData.shopNumber));
          }
        });
      } else {
        if (mounted) {
          ResultCheckUtils.checkResult(context, data.code, data.msg);
        }
      }
    }
  }

  void startTimer() {
    mTimer = Timer.periodic(const Duration(seconds: 15 * 60), (timer) {
      //每隔 15 分钟 刷新一次数据
      getHomeData();
    });
  }

  @override
  void initState() {
    super.initState();

    scale = ScreenUtil().screenHeight > 414
        ? 0.4
        : (ScreenUtil().screenHeight > 411 ? 0.3 : 0.25);

    getHomeData();

    timerPeriodic = Timer.periodic(const Duration(milliseconds: 100), (timer) {
      if (autoScontroller.hasClients) {
        if (null != mHomeData && mHomeData!.saleDetail.isNotEmpty) {
          offset++;
          // autoScontroller.jumpTo(offset);
          autoScontroller.animateTo(offset,
              duration: const Duration(milliseconds: 100),
              curve: Curves.linear);
        }
      }
    });

    // 滚动监听事件
    autoScontroller.addListener(() {
      if (null != mHomeData && mHomeData!.saleDetail.isNotEmpty) {
        if (autoScontroller.position.pixels <= 0) {
        } else if (autoScontroller.position.pixels >=
            autoScontroller.position.maxScrollExtent) {
          setState(() {
            offset = 0;
          });
        }
      }
    });

    //定时器 15分钟 刷新一次首页数据
    startTimer();
  }

  @override
  void dispose() {
    super.dispose();
    timer?.cancel();
    timerPeriodic?.cancel();
    autoScontroller.dispose();

    mTimer?.cancel();
  }

  @override
  Widget build(BuildContext context) {
    super.build(context);
    return Scaffold(
      body: Container(
        width: double.infinity,
        height: double.infinity,
        decoration: const BoxDecoration(
          image: DecorationImage(
            image: AssetImage(
              "assets/images/icon_pad_main_en_back.png",
            ),
            fit: BoxFit.fill,
          ),
        ),
        child: Container(
          /*margin: EdgeInsets.only(
            bottom: scale <= 0.3 ? 70.w : 90.w,
            top: scale <= 0.3 ? 100.w : 130.w,
            left: 70.w,
            right: 55.w,
          ),*/
          margin: EdgeInsets.only(
            bottom: 90.w,
            top: 150.w,
            left: 70.w,
            right: 55.w,
          ),
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Expanded(
                flex: 3,
                child: Column(
                  children: [
                    /*今日数据信息*/
                    allItems.isEmpty
                        ? Container()
                        : OptionGridView(
                            itemCount: allItems.length,
                            rowCount: 4,
                            mainAxisSpacing: 10,
                            crossAxisSpacing: 10,
                            itemBuilder: (BuildContext context, int index) {
                              return Container(
                                alignment: Alignment.center,
                                padding: EdgeInsets.only(top: 5.w, bottom: 5.w),
                                decoration: BoxDecoration(
                                  borderRadius: BorderRadius.all(
                                    Radius.circular(5.w),
                                  ),
                                  border: Border.all(
                                    color: const Color(0xFF829EEE),
                                    width: 1.w,
                                  ),
                                ),
                                child: Column(
                                  children: [
                                    SizedBox(
                                      height: 20.w,
                                    ),
                                    Row(
                                      crossAxisAlignment:
                                          CrossAxisAlignment.center,
                                      mainAxisAlignment:
                                          MainAxisAlignment.center,
                                      children: [
                                        Expanded(
                                          child: Text(
                                            allItems[index].name,
                                            maxLines: 1,
                                            overflow: TextOverflow.ellipsis,
                                            style: TextStyle(
                                              color: const Color(0xFF1ED2FF),
                                              fontSize: ScreenUtil().setSp(10),
                                              // fontSize: allItems[index]
                                              //         .name
                                              //         .contains("皇家")
                                              //     ? ScreenUtil().setSp(12)
                                              //     : ScreenUtil().setSp(14),
                                              fontWeight: FontWeight.w500,
                                            ),
                                            textAlign: TextAlign.center,
                                          ),
                                        ),
                                        Visibility(
                                          visible:
                                              allItems[index].unit.isNotEmpty,
                                          child: Text(
                                            allItems[index].unit,
                                            maxLines: 1,
                                            overflow: TextOverflow.ellipsis,
                                            style: TextStyle(
                                              color: const Color(0xFF1ED2FF),
                                              fontSize: 12.sp,
                                              fontWeight: FontWeight.w500,
                                            ),
                                          ),
                                        ),
                                      ],
                                    ),
                                    SizedBox(
                                      height: 10.w,
                                    ),
                                    Text(
                                      allItems[index].value,
                                      style: TextStyle(
                                        color: const Color(0xFFFFCA9A),
                                        fontSize: 20.sp,
                                        fontWeight: FontWeight.bold,
                                      ),
                                    ),
                                    SizedBox(
                                      height: 10.w,
                                    ),
                                  ],
                                ),
                              );
                            },
                            scrollController: scrollController,
                          ),
                    underline(30.w, 0.w, 10.w, 30.w),
                    /*中国地图*/
                    Container(
                      alignment: Alignment.centerLeft,
                      margin: EdgeInsets.only(
                        top: 15.w,
                      ),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text(
                            "Sales Coverage",
                            style: TextStyle(
                              color: Colors.white,
                              fontSize: 26.sp,
                              fontWeight: FontWeight.bold,
                            ),
                          ),
                          Container(
                            alignment: Alignment.center,
                            width: double.infinity,
                            child: Stack(
                              children: [
                                Container(
                                  width: double.infinity,
                                  alignment: Alignment.centerRight,
                                  margin:
                                      EdgeInsets.only(top: 230.w, right: 0.w),
                                  child: Text(
                                    selectPIndex == -1
                                        ? ""
                                        : "${mHomeData!.salesRegion[selectPIndex].pname}: ${mHomeData!.salesRegion[selectPIndex].nums}",
                                    style: TextStyle(
                                      color: const Color(0xFF1ED2FF),
                                      fontSize: 18.sp,
                                      fontWeight: FontWeight.bold,
                                    ),
                                    textAlign: TextAlign.end,
                                  ),
                                ),
                                Container(
                                  width: double.infinity,
                                  alignment: Alignment.center,
                                  child: MapWidget(
                                    /*initScaleX: scale,
                                    initScaleY: scale,*/
                                    initScaleX: 0.6,
                                    initScaleY: 0.6,
                                    callBack: (String name) {
                                      if (null != mHomeData &&
                                          mHomeData!.salesRegion.isNotEmpty) {
                                        for (var i = 0;
                                            i < mHomeData!.salesRegion.length;
                                            i++) {
                                          if (mHomeData!.salesRegion[i].pname
                                              .contains(name)) {
                                            setState(() {
                                              selectPIndex = i;
                                            });
                                            break;
                                          }
                                        }
                                      }
                                    },
                                  ),
                                ),
                              ],
                            ),
                          ),
                        ],
                      ),
                    ),
                    SizedBox(
                      height: 15.w,
                    ),
                    Expanded(
                      child: Container(
                        alignment: Alignment.centerLeft,
                        padding: EdgeInsets.only(
                          top: 15.w,
                          left: 25.w,
                          bottom: 10.w,
                        ),
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.all(
                            Radius.circular(10.w),
                          ),
                          border: Border.all(
                            color: const Color(0xFF829EEE),
                            width: 1.w,
                          ),
                        ),
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Text(
                              "Real-time Sales Details",
                              style: TextStyle(
                                color: const Color(0xFF1ED2FF),
                                fontSize: 22.sp,
                                fontWeight: FontWeight.w500,
                              ),
                            ),
                            SizedBox(
                              height: 15.w,
                            ),
                            Expanded(
                              child: null == mHomeData ||
                                      mHomeData!.saleDetail.isEmpty
                                  ? Container()
                                  : ListView.builder(
                                      shrinkWrap: true,
                                      itemCount: mHomeData!.saleDetail.length,
                                      scrollDirection: Axis.vertical,
                                      controller: autoScontroller,
                                      itemBuilder:
                                          (BuildContext context, int index) {
                                        var data = mHomeData!.saleDetail[index];
                                        return Container(
                                          margin: EdgeInsets.only(
                                              bottom: 15.w, right: 25.w),
                                          child: Row(
                                            children: [
                                              Text(
                                                data.date,
                                                style: TextStyle(
                                                  color:
                                                      const Color(0xFF1ED2FF),
                                                  fontSize: 18.sp,
                                                  fontWeight: FontWeight.w500,
                                                ),
                                              ),
                                              SizedBox(
                                                width: 15.w,
                                              ),
                                              Text(
                                                data.time,
                                                style: TextStyle(
                                                  color:
                                                      const Color(0xFF1ED2FF),
                                                  fontSize: 18.sp,
                                                  fontWeight: FontWeight.w500,
                                                ),
                                              ),
                                              SizedBox(
                                                width: 15.w,
                                              ),
                                              Text(
                                                data.shopName,
                                                style: TextStyle(
                                                  color:
                                                      const Color(0xFF1ED2FF),
                                                  fontSize: 18.sp,
                                                  fontWeight: FontWeight.w500,
                                                ),
                                              ),
                                              Expanded(
                                                child: Text(
                                                  data.regionAddress,
                                                  textAlign: TextAlign.end,
                                                  style: TextStyle(
                                                    color:
                                                        const Color(0xFF1ED2FF),
                                                    fontSize: 18.sp,
                                                    fontWeight: FontWeight.w500,
                                                  ),
                                                ),
                                              ),
                                            ],
                                          ),
                                        );
                                      },
                                    ),
                            ),
                          ],
                        ),
                      ),
                    ),
                  ],
                ),
              ),
              Expanded(
                flex: 5,
                child: Column(
                  children: [
                    Expanded(
                      flex: 2,
                      child: Container(
                        width: double.infinity,
                        margin:
                            EdgeInsets.only(left: 30.w, top: 0.w, right: 10.w),
                        color: const Color(0x260085F7),
                        child: mHomeData == null
                            ? Container()
                            : Column(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: [
                                  //东西南北
                                  Expanded(
                                    child: zoneWidget2(mHomeData!.zoneEast, 0),
                                  ),
                                  Expanded(
                                    child: zoneWidget2(mHomeData!.zoneWest, 1),
                                  ),
                                  Expanded(
                                    child: zoneWidget2(mHomeData!.zoneSouth, 2),
                                  ),
                                  Expanded(
                                    child: zoneWidget2(mHomeData!.zoneNorth, 3),
                                  ),
                                ],
                              ),
                      ),
                    ),
                    SizedBox(
                      height: 20.w,
                    ),
                    Expanded(
                      child: Container(
                        padding: EdgeInsets.only(left: 32.w, right: 10.w),
                        child: Row(
                          children: [
                            Expanded(
                              child: Column(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: [
                                  underline(0.w, 0.w, 30.w, 30.w),
                                  Row(
                                    children: [
                                      Image.asset(
                                        "assets/images/icon_trangle.png",
                                        width: 14.w,
                                        height: 29.w,
                                      ),
                                      SizedBox(
                                        width: 15.w,
                                      ),
                                      Text(
                                        "MTD Sales Top5(Province)",
                                        style: TextStyle(
                                          color: const Color(0xFFFFFFFF),
                                          fontSize: 24.sp,
                                          fontWeight: FontWeight.bold,
                                        ),
                                      ),
                                    ],
                                  ),
                                  underline(30.w, 0.w, 0, 30.w),
                                  Expanded(
                                    child: Container(
                                      margin: EdgeInsets.only(top: 20.w),
                                      padding: EdgeInsets.only(
                                          left: 20.w,
                                          top: 16.w,
                                          right: 20.w,
                                          bottom: 15.w),
                                      decoration: BoxDecoration(
                                        borderRadius: BorderRadius.all(
                                          Radius.circular(10.w),
                                        ),
                                        border: Border.all(
                                          color: const Color(0xFF829EEE),
                                          width: 1.w,
                                        ),
                                      ),
                                      child: mHomeData == null ||
                                              mHomeData!.saleProvince.isEmpty
                                          ? Container()
                                          : ListView.builder(
                                              shrinkWrap: true,
                                              itemCount: mHomeData!
                                                  .saleProvince.length,
                                              scrollDirection: Axis.vertical,
                                              itemBuilder:
                                                  (BuildContext context,
                                                      int index) {
                                                return Container(
                                                  margin: EdgeInsets.only(
                                                      bottom: 15.w,
                                                      right: 35.w),
                                                  child: Row(
                                                    crossAxisAlignment:
                                                        CrossAxisAlignment
                                                            .center,
                                                    mainAxisAlignment:
                                                        MainAxisAlignment
                                                            .center,
                                                    children: [
                                                      Image.asset(
                                                        topIcons[index],
                                                        width: 18.w,
                                                        height: 24.w,
                                                      ),
                                                      SizedBox(
                                                        width: 15.w,
                                                      ),
                                                      Expanded(
                                                        child: Text(
                                                          // "浙江省宁波市余姚市",
                                                          mHomeData!
                                                              .saleProvince[
                                                                  index]
                                                              .regionProvince,
                                                          textAlign:
                                                              TextAlign.left,
                                                          style: TextStyle(
                                                            color: const Color(
                                                                0xFF1ED2FF),
                                                            fontSize: 18.sp,
                                                            fontWeight:
                                                                FontWeight.bold,
                                                          ),
                                                        ),
                                                      ),
                                                    ],
                                                  ),
                                                );
                                              },
                                            ),
                                    ),
                                  ),
                                ],
                              ),
                            ),
                            SizedBox(
                              width: 40.w,
                            ),
                            Expanded(
                              child: Column(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: [
                                  underline(0.w, 0.w, 30.w, 30.w),
                                  Row(
                                    children: [
                                      Image.asset(
                                        "assets/images/icon_trangle.png",
                                        width: 14.w,
                                        height: 29.w,
                                      ),
                                      SizedBox(
                                        width: 15.w,
                                      ),
                                      Text(
                                        "MTD Sales Top5(City)",
                                        style: TextStyle(
                                          color: const Color(0xFFFFFFFF),
                                          fontSize: 24.sp,
                                          fontWeight: FontWeight.bold,
                                        ),
                                      ),
                                    ],
                                  ),
                                  underline(30.w, 0.w, 0, 30.w),
                                  Expanded(
                                    child: Container(
                                      width: double.infinity,
                                      margin: EdgeInsets.only(top: 20.w),
                                      padding: EdgeInsets.only(
                                          left: 20.w,
                                          top: 16.w,
                                          right: 20.w,
                                          bottom: 15.w),
                                      decoration: BoxDecoration(
                                        borderRadius: BorderRadius.all(
                                          Radius.circular(10.w),
                                        ),
                                        border: Border.all(
                                          color: const Color(0xFF829EEE),
                                          width: 1.w,
                                        ),
                                      ),
                                      child: mHomeData == null ||
                                              mHomeData!.saleCity.isEmpty
                                          ? Container()
                                          : ListView.builder(
                                              shrinkWrap: true,
                                              itemCount:
                                                  mHomeData!.saleCity.length,
                                              scrollDirection: Axis.vertical,
                                              itemBuilder:
                                                  (BuildContext context,
                                                      int index) {
                                                return Container(
                                                  margin: EdgeInsets.only(
                                                      bottom: 15.w,
                                                      right: 35.w),
                                                  child: Row(
                                                    children: [
                                                      Image.asset(
                                                        // "assets/images/icon_one.png",
                                                        topIcons[index],
                                                        width: 18.w,
                                                        height: 24.w,
                                                      ),
                                                      SizedBox(
                                                        width: 15.w,
                                                      ),
                                                      Expanded(
                                                        child: Text(
                                                          // "浙江省宁波市余姚市",
                                                          mHomeData!
                                                              .saleCity[index]
                                                              .regionProvince,
                                                          textAlign:
                                                              TextAlign.left,
                                                          style: TextStyle(
                                                            color: const Color(
                                                                0xFF1ED2FF),
                                                            fontSize: 18.sp,
                                                            fontWeight:
                                                                FontWeight.bold,
                                                          ),
                                                        ),
                                                      ),
                                                    ],
                                                  ),
                                                );
                                              },
                                            ),
                                    ),
                                  ),
                                ],
                              ),
                            ),
                          ],
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  //走马灯效果
  MarqueeWidget buildMarqueeWidget(List<String> loopList) {
    ///上下轮播 安全提示
    return MarqueeWidget(
      //子Item构建器
      itemBuilder: (BuildContext context, int index) {
        String itemStr = loopList[index];
        //通常可以是一个 Text文本
        return Container(
          height: 45.h,
          padding: EdgeInsets.only(
            left: 15.w,
          ),
          alignment: Alignment.centerLeft,
          child: Text(
            itemStr,
            style: TextStyle(
              color: Colors.white,
              fontSize: 26.sp,
            ),
            softWrap: true,
            overflow: TextOverflow.ellipsis,
          ),
        );
      },
      //循环的提示消息数量
      count: loopList.length,
    );
  }

  Widget underline(double top, double left, double bottom, double mWidth) {
    return Container(
      margin: EdgeInsets.only(
        top: top,
        left: left,
        bottom: bottom,
      ),
      color: const Color(0xFF0F5FAF),
      width: double.infinity,
      height: 1.5.w,
      child: Stack(
        children: [
          Container(
            color: const Color(0xff00B7FE),
            width: mWidth,
            height: 2.w,
          ),
        ],
      ),
    );
  }

  Widget emptyWidget(double top, double left, double mWidth) {
    return Container(
      margin: EdgeInsets.only(
        top: top,
        left: left,
      ),
      color: const Color(0xff1ED2FF),
      width: 25.w,
      height: 2.w,
    );
  }

  //东西南北区
  Widget zoneWidget(Zone data, int index) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Row(
          children: [
            SizedBox(
              width: 11.w,
            ),
            Image.asset(
              "assets/images/icon_trangle.png",
              width: 14.w,
              height: 29.w,
            ),
            SizedBox(
              width: 10.w,
            ),
            Text(
              zoneIndex[index],
              style: TextStyle(
                color: const Color(0xFFFFFFFF),
                fontSize: 24.sp,
                fontWeight: FontWeight.bold,
              ),
            ),
          ],
        ),
        SizedBox(
          height: 15.w,
        ),
        Row(
          children: [
            SizedBox(
              width: 10.w,
            ),
            Expanded(
              child: zoneItem("本月皇家美素(箱)", data.prestigeGoods),
            ),
            SizedBox(
              width: 10.w,
            ),
            Expanded(
              child: zoneItem("本月源悦(箱)", data.dLGoods),
            ),
            SizedBox(
              width: 10.w,
            ),
            Expanded(
              child: zoneItem("本月米粉(箱)", data.goldGoods),
            ),
            SizedBox(
              width: 10.w,
            ),
            Expanded(
              child: zoneItem("本月旺玥(箱)", data.immuGoods),
            ),
            SizedBox(
              width: 10.w,
            ),
            Expanded(
              child: zoneItem("本月活跃LSP数", data.lspNumber),
            ),
            SizedBox(
              width: 10.w,
            ),
            Expanded(
              child: zoneItem("本月新开活跃门店数", data.customerNumber),
            ),
            SizedBox(
              width: 10.w,
            ),
            Expanded(
              child: zoneItem("本月活跃门店数", data.shopNumber),
            ),
            SizedBox(
              width: 10.w,
            ),
          ],
        ),
      ],
    );
  }

  Widget zoneWidget2(Zone data, int index) {
    return Column(
      // mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        underline(index == 0 ? 0.w : 5.w, 0.w, 10.w, 30.w),
        Row(
          children: [
            SizedBox(
              width: 11.w,
            ),
            Image.asset(
              "assets/images/icon_trangle.png",
              width: 14.w,
              height: 29.w,
            ),
            SizedBox(
              width: 10.w,
            ),
            Text(
              zoneIndex[index],
              style: TextStyle(
                color: const Color(0xFFFFFFFF),
                fontSize: 24.sp,
                fontWeight: FontWeight.bold,
              ),
            ),
          ],
        ),
        SizedBox(
          height: 20.w,
        ),
        Row(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            SizedBox(
              width: 10.w,
            ),
            Expanded(
              child: zoneItem("MTD Prestige(Ctn)", data.prestigeGoods),
            ),
            SizedBox(
              width: 10.w,
            ),
            Expanded(
              child: zoneItem("MTD Prestige Supreme(Ctn)", data.supremeGoods),
            ),
            SizedBox(
              width: 10.w,
            ),
            Expanded(
              child: zoneItem("MTD Natura(Ctn)", data.dLGoods),
            ),
            SizedBox(
              width: 10.w,
            ),
            /*Expanded(
              child: zoneItem("本月米粉(箱)", data.goldGoods),
            ),
            SizedBox(
              width: 10.w,
            ),*/
            Expanded(
              child: zoneItem("MTD Prestige Kids(Ctn)", data.immuGoods),
            ),
            SizedBox(
              width: 10.w,
            ),
            Expanded(
              child: zoneItem("Active LSP (MTD)", data.lspNumber),
            ),
            SizedBox(
              width: 10.w,
            ),
            Expanded(
              child: zoneItem("New Active Store (MTD)", data.customerNumber),
            ),
            SizedBox(
              width: 10.w,
            ),
            Expanded(
              child: zoneItem("Active Store(MTD)", data.shopNumber),
            ),
            SizedBox(
              width: 10.w,
            ),
          ],
        )
      ],
    );
  }

  Widget zoneItem(String title, String value) {
    return Container(
      alignment: Alignment.center,
      padding: EdgeInsets.only(
        top: 15.w,
        bottom: 15.w,
      ),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.all(
          Radius.circular(5.w),
        ),
        border: Border.all(
          color: const Color(0xFF829EEE),
          width: 1.w,
        ),
      ),
      child: Column(
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(
                title,
                maxLines: 1,
                overflow: TextOverflow.ellipsis,
                style: TextStyle(
                  color: const Color(0xFF1ED2FF),
                  fontSize: 10.sp,
                  fontWeight: FontWeight.bold,
                ),
              ),
              Visibility(
                visible: title.contains("皇家活跃") ||
                    title.contains("源悦活跃") ||
                    title.contains("米粉活跃"),
                child: Container(
                  margin: EdgeInsets.only(top: 3.w),
                  child: Text(
                    "(MTD/P3M)",
                    style: TextStyle(
                      color: const Color(0xFF1ED2FF),
                      fontSize: 10.sp,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                ),
              ),
            ],
          ),
          SizedBox(
            height: 10.w,
          ),
          value.isEmpty
              ? emptyWidget(0, 0, 0)
              : Text(
                  value,
                  style: TextStyle(
                    color: const Color(0xFFFFCA9A),
                    fontSize: 20.sp,
                    fontWeight: FontWeight.bold,
                  ),
                ),
        ],
      ),
    );
  }
}
